<template>
	<view class="salcont">
		<view class="sal_item" v-for="(item,index) in list">
			<view class="_item_tit">
				{{item.title}}
			</view>
			<u-radio-group :wrap="true" v-model="value" @change="radioGroupChange(item.id)">
				<!--  :disabled="item.disabled" -->
				<u-radio class="radio" label-size="24rpx" @change="radioChange" v-for="(item, _index) in item.checkTopicAnswers" :key="_index" :name="item.content">
					{{item.content}}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="btn_cont">
			<u-button type="primary" shape="circle" size="medium" @click="gobtnFn" :custom-style="customStyle">上一题</u-button>
			<u-button v-if="allnum==num" type="primary" shape="circle" size="medium" @click="tiFn" :custom-style="customStyle">提交结果</u-button>
			<u-button v-else type="primary" shape="circle" size="medium" @click="salbtnFn" :custom-style="customStyle">下一题</u-button>
		</view>
		
	</view>
</template>

<script>
	import {checkTopic} from '@/api/default.js'
	export default {
		data() {
			return {
				list:[],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				title:'',
				customStyle:{
					marginTop:'20px',
					// margin:'auto'
				},
				id:'',
				num:'',
				allnum:''
			}
		},
		onLoad(query) {
			this.num=parseInt(query.num)+1
			checkTopic({number:this.num,id:null}).then(res=>{
				this.list=res.data
				this.allnum=res.data[0].number
			})
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// e
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// e
				this.id=e
			},
			salbtnFn(){
				if(this.id==''){
					uni.showToast({
						title:'请选择',
						icon:'none'
					})
				}else{
					
					uni.navigateTo({
						url:'../fist/fist?id='+this.id+'&num='+this.num
					})
				}
			},
			tiFn(){
				
			},
			gobtnFn(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.salcont {
		width: 100%;
		height: 100vh;
		// background-image: url(../../../../../static/images/sa.png);
		background-image: url("https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/images/ping.png");
		background-size: 100% 100%;
		padding: 20px 0;
		// box-sizing: border-box;
		display: flex;
		// justify-content: center;
		align-items: center;
		flex-direction: column;
		.sal_item{
			width: 77%;
			background-color: #FFFFFF;
			border-radius: 5px;
			margin-top:70px;
			// margin: auto;
			padding: 10px 10px 20px;
			._item_tit{
				font-size: 16px;
				text-align: center;
				margin: 10px 0;
			}
			.radio{
				margin: 15px 0;
			}
		}
		.btn_cont{
			display: flex;
			justify-content: space-around;
		}
	}
</style>
